<template>
    <div>
		<div style="padding:28px 10px 10px 10px;border-bottom:1px solid #eee;">
			<el-form ref="searchForm" :inline="true" :model="applyObj" label-width="80px">
				<el-form-item label="兑换时间" prop="applyTime">
					<el-date-picker
						v-model="applyObj.applyTime"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="timestamp"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="apply">申请开票</el-button>
                </el-form-item>
			</el-form>

		</div>
        <div class="search-content">
            <el-form ref="searchForm" :inline="true" :model="searchContent" label-width="100px">
                <el-form-item label="批次号" prop="currentBatch">
                    <el-input
                        class="search-content-input"
                        v-model="searchContent.currentBatch"
                        placeholder="批次号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="第三方申请号" prop="markId">
                    <el-input
                        class="search-content-input"
                        v-model="searchContent.markId"
                        placeholder="第三方申请号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="开票状态"  prop="state">
                    <el-select
                        clearable
                        v-model="searchContent.state"
                        placeholder="开票状态"
                    >
                        <el-option label="未开票" value="0"></el-option>
                        <el-option label="全部开票" value="1"></el-option>
                        <el-option label="驳回开票" value="2"></el-option>
                        <el-option label="部分开票" value="3"></el-option>
                        <el-option label="发票寄出" value="4"></el-option>
                        <el-option label="取消开票" value="5"></el-option>
                        <el-option label="开票失败" value="6"></el-option>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="resetSearchData">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table :data="goodsList" border :height="oHeight" :fit="true">
                <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
                <el-table-column align="center" prop="currentBatch" label="批次号" min-width="80"></el-table-column>
                <el-table-column align="center" prop="markId" label="第三方申请单号" min-width="110"></el-table-column>
                <el-table-column align="center" prop="invoiceNum" label="当前批次订单总数" min-width="120"></el-table-column>
                <el-table-column align="center" prop="invoiceDate" label="开票时间" min-width="150" >
					<!--#default="{row}" {{row.invoiceDate*1000|dateFormat("YYYY-MM-DD hh:mm:ss")}} -->
				</el-table-column>
                <el-table-column align="center" prop="state" label="开票状态" min-width="180" #default="{row}">
					{{stateObj[row.state] }}
					<el-button style="margin-left:10px;" v-if="row.state == 2" type="primary" @click="showDetail(row)">查看原因</el-button>
				</el-table-column>
                <el-table-column align="center" prop="totalBatchInvoiceAmount" label="总批次含税总金额" min-width="130"></el-table-column>
                <el-table-column
                    align="center"
                    prop="invoicePrice"
                    label="当前批次含税总金额"
                    min-width="130"
                ></el-table-column>
                <el-table-column
					fixed="right"
                    align="center"
                    prop="isInitiative"
                    label="操作"
                    min-width="370"
                    #default="{row}"
                >
                    <el-button type="primary" @click="buttonDeal('showOrder',row)">查看详情</el-button>
					<el-button
                        type="primary"
                        @click="buttonDeal('cancel',row)"
                    >取消</el-button>
                    <el-button
                        type="primary"
                        @click="download('/admin/pointprod/index.php?act=pointInvoice&op=orderItems&markId='+row.markId)"
                    >订单明细</el-button>
                    <el-button
                        type="primary"
                        @click="download('/admin/pointprod/index.php?act=pointInvoice&op=invoiceItems&markId='+row.markId)"
                    >发票明细</el-button>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <!-- <el-button type="primary" class="btn-bottom" @click="expertData">导出检索数据</el-button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <jd-invoice ref="orderInfo"></jd-invoice>
        <update-drawer ref="updateDrawer"></update-drawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import jdInvoice from './jd-invoice-drawer';
import updateDrawer from './update-shipInfo-drawer';
import { dateFormatter, objScreen } from "@/common/js/util";
export default {
    components: { jdInvoice, updateDrawer },
    data() {
        return {
            goodsList: [],
            oHeight: 800,
            searchContent: {
                currentPage: 1,
				pageSize: localStorage.getItem('pageSize') * 1 || 10,
				currentBatch:'',
				markId:'',
				state:'',//0 未开票 1全部开票 2 驳回开票 3部分开票 4 发票寄出 5取消开票 6开票失败
			},
			stateObj:{
				0:'未开票',
				1:'全部开票',
				2:'驳回开票',
				3:'部分开票',
				4:'发票寄出',
				5:'取消开票',
				6:'开票失败'
			},
            searchObj: {},
            total: 0,
			category_options: [],
			type_options:[],
			pgoods_brand_options: [],
			
			applyObj:{
				applyTime:''
			}
			
        };
    },
    created() {
        this.getListData(true);
        this.beforeData();
    },
    methods: {
        beforeData() {
            var data = {
                page: 1,
                pageSize: 99999
            };
            this.$http.get(`/admin/pointprod/index.php?act=pointCategory&op=list&parent_id=0`, {
                params: data
            }).then(res => {
                this.category_options = res.data.list
            }).catch(err => {
                this._message('error', err);
			})
			this.$http.get(`/admin/pointprod/index.php?act=pointOrder&op=stateList`, {
                params: data
            }).then(res => {
                this.type_options = res.data
            }).catch(err => {
                this._message('error', err);
            })
		},
		showDetail({markId}){
			this.$http.get('/admin/pointprod/index.php?act=pointInvoice&op=select&markId='+markId).then((res) => {
                if (res.code === 1000) {
					/* this.$alert(res.msg, '驳回原因', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					}) */
					this.$alert('<p style="max-height:500px;overflow:auto;">'+res.msg+'</p>', '驳回原因', {
						dangerouslyUseHTMLString: true
					});
                    // this.total = res.data.totalCount;
                    // this.goodsList = res.data.list;
					// this.getListData();
                } else {
                    // this.total = 0;
                    // this.goodsList = [];

                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
		},
		apply(){
			let applyTime = this.applyObj.applyTime;
			if(!applyTime){
				this._message('error', '申请时间不能为空');
				return
			}
			let params = objScreen({
				timeStart:applyTime[0]/1000,
				timeEnd:applyTime[1]/1000+3600*24
			})
			this.$http.get('/admin/pointprod/index.php?act=pointInvoice&op=submit', {
                params
            }).then((res) => {
                if (res.code === 1) {
                    // this.total = res.data.totalCount;
                    // this.goodsList = res.data.list;
                    this._message('success', res.msg);
					// this.getListData();
					this.getListData()
                } else {
                    // this.total = 0;
                    // this.goodsList = [];

                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
		},
        getListData(first) {
            var data = this.searchObj;
            data.page = this.searchContent.currentPage;
            data.pageSize = this.searchContent.pageSize;
            this.$http.get('/admin/pointprod/index.php?act=pointInvoice&op=list', {
                params:data
            }).then((res) => {
                if (res.code === 1) {
                    this.total = res.data.totalCount;
                    this.goodsList = res.data.list;
                    // this._message('success', res.msg);
                    // this.getListData();
                } else {
                    this.total = 0;
					this.goodsList = [];
					if(first){
						return
					}
                    this._message('error', err);
                }
            }).catch(err => {
				if(first){
					return
				}
                this._message('error', err);
            })
        },
        search() {
			this.searchContent.currentPage = 1;
            this.searchObj = objScreen({
				currentBatch:this.searchContent.currentBatch,
				markId:this.searchContent.markId,
				state:this.searchContent.state
            })
            this.getListData();
        },
        resetSearchData() {
            this.$refs['searchForm'].resetFields();
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
            this.searchContent.pageSize = pageSize;
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        handleCurrentChange(page) {
            this.searchContent.currentPage = page;
            this.getListData();
        },
        buttonDeal(type, row) {
            switch (type) {
                case 'showOrder':
                    this.$refs.orderInfo.show_dialog_fn(row);
                    break;
                case 'add':
                    this.$refs.updateDrawer.show_dialog_fn(row,1);
                    break;
                case 'update':
                    this.$refs.updateDrawer.show_dialog_fn(row);
					break;
				case 'cancel':
                    this.cancel(row)
                    break;
            }
		},
		cancel({markId}) {
			 this.$http.post('/admin/pointprod/index.php?act=pointInvoice&op=cancel', {
                markId: markId
            }).then((res) => {
                if (res.code === 1) {
					this.row.point_orderstate = 5;
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
		},
		download(url){
			window.location.href = this.$store.state.location.origin + url;
		}
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-content-input {
    width: 200px;
}
</style>